<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小红书API使用示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    .api-section {
      margin-bottom: 30px;
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 5px;
    }

    .api-title {
      color: #333;
      border-bottom: 2px solid #666;
      padding-bottom: 10px;
    }

    .api-example {
      background-color: #f5f5f5;
      padding: 15px;
      border-radius: 5px;
      margin: 10px 0;
    }

    button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin: 5px;
    }

    button:hover {
      background-color: #45a049;
    }

    pre {
      background-color: #f8f8f8;
      padding: 10px;
      border-radius: 4px;
      overflow-x: auto;
    }

    .response {
      margin-top: 10px;
      padding: 10px;
      background-color: #e8f5e9;
      border-radius: 4px;
    }

    .form-group {
      margin-bottom: 10px;
    }

    label {
      display: block;
      margin-bottom: 5px;
    }

    input,
    select,
    textarea {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
  </style>
</head>

<body>
  <h1>小红书API使用示例</h1>

  <!-- 用户相关API -->
  <div class="api-section">
    <h2 class="api-title">用户相关API</h2>

    <!-- 获取所有用户 -->
    <div class="api-example">
      <h3>获取所有用户</h3>
      <button onclick="getAllUsers()">获取所有用户</button>
      <div id="allUsersResponse" class="response"></div>
    </div>

    <!-- 获取单个用户 -->
    <div class="api-example">
      <h3>获取单个用户</h3>
      <div class="form-group">
        <label for="userId">用户ID：</label>
        <input type="text" id="userId" placeholder="输入用户ID">
      </div>
      <button onclick="getUser()">获取用户</button>
      <div id="singleUserResponse" class="response"></div>
    </div>

    <!-- 创建用户 -->
    <div class="api-example">
      <h3>创建用户</h3>
      <div class="form-group">
        <label for="newUserNickname">用户昵称：</label>
        <input type="text" id="newUserNickname" placeholder="输入用户昵称">
      </div>
      <div class="form-group">
        <label for="newUserAvatar">头像URL：</label>
        <input type="text" id="newUserAvatar" placeholder="输入头像URL">
      </div>
      <button onclick="createUser()">创建用户</button>
      <div id="createUserResponse" class="response"></div>
    </div>

    <!-- 更新用户 -->
    <div class="api-example">
      <h3>更新用户</h3>
      <div class="form-group">
        <label for="updateUserId">用户ID：</label>
        <input type="text" id="updateUserId" placeholder="输入要更新的用户ID">
      </div>
      <div class="form-group">
        <label for="updateUserNickname">新昵称：</label>
        <input type="text" id="updateUserNickname" placeholder="输入新昵称">
      </div>
      <div class="form-group">
        <label for="updateUserAvatar">新头像URL：</label>
        <input type="text" id="updateUserAvatar" placeholder="输入新头像URL">
      </div>
      <button onclick="updateUser()">更新用户</button>
      <div id="updateUserResponse" class="response"></div>
    </div>

    <!-- 删除用户 -->
    <div class="api-example">
      <h3>删除用户</h3>
      <div class="form-group">
        <label for="deleteUserId">用户ID：</label>
        <input type="text" id="deleteUserId" placeholder="输入要删除的用户ID">
      </div>
      <button onclick="deleteUser()">删除用户</button>
      <div id="deleteUserResponse" class="response"></div>
    </div>

    <!-- 获取用户的笔记 -->
    <div class="api-example">
      <h3>获取用户的笔记</h3>
      <div class="form-group">
        <label for="userNotesId">用户ID：</label>
        <input type="text" id="userNotesId" placeholder="输入用户ID">
      </div>
      <button onclick="getUserNotes()">获取用户笔记</button>
      <div id="userNotesResponse" class="response"></div>
    </div>

    <!-- 获取用户的评论 -->
    <div class="api-example">
      <h3>获取用户的评论</h3>
      <div class="form-group">
        <label for="userCommentsId">用户ID：</label>
        <input type="text" id="userCommentsId" placeholder="输入用户ID">
      </div>
      <button onclick="getUserComments()">获取用户评论</button>
      <div id="userCommentsResponse" class="response"></div>
    </div>
  </div>

  <!-- 笔记相关API -->
  <div class="api-section">
    <h2 class="api-title">笔记相关API</h2>

    <!-- 获取所有笔记 -->
    <div class="api-example">
      <h3>获取所有笔记</h3>
      <button onclick="getAllNotes()">获取所有笔记</button>
      <div id="allNotesResponse" class="response"></div>
    </div>

    <!-- 获取单个笔记 -->
    <div class="api-example">
      <h3>获取单个笔记</h3>
      <div class="form-group">
        <label for="noteId">笔记ID：</label>
        <input type="text" id="noteId" placeholder="输入笔记ID">
      </div>
      <button onclick="getNote()">获取笔记</button>
      <div id="singleNoteResponse" class="response"></div>
    </div>

    <!-- 创建笔记 -->
    <div class="api-example">
      <h3>创建笔记</h3>
      <div class="form-group">
        <label for="noteUserId">用户ID：</label>
        <input type="text" id="noteUserId" placeholder="输入用户ID">
      </div>
      <div class="form-group">
        <label for="noteTitle">笔记标题：</label>
        <input type="text" id="noteTitle" placeholder="输入笔记标题">
      </div>
      <div class="form-group">
        <label for="noteDescription">笔记描述：</label>
        <textarea id="noteDescription" placeholder="输入笔记描述"></textarea>
      </div>
      <div class="form-group">
        <label for="noteTimeLocation">时间和地点：</label>
        <input type="text" id="noteTimeLocation" placeholder="输入时间和地点">
      </div>
      <button onclick="createNote()">创建笔记</button>
      <div id="createNoteResponse" class="response"></div>
    </div>

    <!-- 更新笔记 -->
    <div class="api-example">
      <h3>更新笔记</h3>
      <div class="form-group">
        <label for="updateNoteId">笔记ID：</label>
        <input type="text" id="updateNoteId" placeholder="输入要更新的笔记ID">
      </div>
      <div class="form-group">
        <label for="updateNoteTitle">新标题：</label>
        <input type="text" id="updateNoteTitle" placeholder="输入新标题">
      </div>
      <div class="form-group">
        <label for="updateNoteDescription">新描述：</label>
        <textarea id="updateNoteDescription" placeholder="输入新描述"></textarea>
      </div>
      <button onclick="updateNote()">更新笔记</button>
      <div id="updateNoteResponse" class="response"></div>
    </div>

    <!-- 删除笔记 -->
    <div class="api-example">
      <h3>删除笔记</h3>
      <div class="form-group">
        <label for="deleteNoteId">笔记ID：</label>
        <input type="text" id="deleteNoteId" placeholder="输入要删除的笔记ID">
      </div>
      <button onclick="deleteNote()">删除笔记</button>
      <div id="deleteNoteResponse" class="response"></div>
    </div>

    <!-- 获取笔记的媒体文件 -->
    <div class="api-example">
      <h3>获取笔记的媒体文件</h3>
      <div class="form-group">
        <label for="noteMediaId">笔记ID：</label>
        <input type="text" id="noteMediaId" placeholder="输入笔记ID">
      </div>
      <button onclick="getNoteMedia()">获取笔记媒体文件</button>
      <div id="noteMediaResponse" class="response"></div>
    </div>

    <!-- 获取笔记的评论 -->
    <div class="api-example">
      <h3>获取笔记的评论</h3>
      <div class="form-group">
        <label for="noteCommentsId">笔记ID：</label>
        <input type="text" id="noteCommentsId" placeholder="输入笔记ID">
      </div>
      <button onclick="getNoteComments()">获取笔记评论</button>
      <div id="noteCommentsResponse" class="response"></div>
    </div>

    <!-- 点赞笔记 -->
    <div class="api-example">
      <h3>点赞笔记</h3>
      <div class="form-group">
        <label for="likeNoteId">笔记ID：</label>
        <input type="text" id="likeNoteId" placeholder="输入笔记ID">
      </div>
      <button onclick="likeNote()">点赞笔记</button>
      <div id="likeNoteResponse" class="response"></div>
    </div>

    <!-- 收藏笔记 -->
    <div class="api-example">
      <h3>收藏笔记</h3>
      <div class="form-group">
        <label for="favoriteNoteId">笔记ID：</label>
        <input type="text" id="favoriteNoteId" placeholder="输入笔记ID">
      </div>
      <button onclick="favoriteNote()">收藏笔记</button>
      <div id="favoriteNoteResponse" class="response"></div>
    </div>
  </div>

  <!-- 媒体文件相关API -->
  <div class="api-section">
    <h2 class="api-title">媒体文件相关API</h2>

    <!-- 获取所有媒体文件 -->
    <div class="api-example">
      <h3>获取所有媒体文件</h3>
      <button onclick="getAllMedia()">获取所有媒体文件</button>
      <div id="allMediaResponse" class="response"></div>
    </div>

    <!-- 获取单个媒体文件 -->
    <div class="api-example">
      <h3>获取单个媒体文件</h3>
      <div class="form-group">
        <label for="mediaId">媒体文件ID：</label>
        <input type="text" id="mediaId" placeholder="输入媒体文件ID">
      </div>
      <button onclick="getMedia()">获取媒体文件</button>
      <div id="singleMediaResponse" class="response"></div>
    </div>

    <!-- 上传媒体文件 -->
    <div class="api-example">
      <h3>上传媒体文件</h3>
      <div class="form-group">
        <label for="mediaNoteId">笔记ID：</label>
        <input type="text" id="mediaNoteId" placeholder="输入笔记ID">
      </div>
      <div class="form-group">
        <label for="mediaFile">选择文件：</label>
        <input type="file" id="mediaFile" title="选择要上传的文件">
      </div>
      <div class="form-group">
        <label for="mediaType">媒体类型：</label>
        <select id="mediaType" title="选择媒体类型">
          <option value="image">图片</option>
          <option value="video">视频</option>
          <option value="video_cover">视频封面</option>
        </select>
      </div>
      <button onclick="uploadMedia()">上传媒体文件</button>
      <div id="uploadMediaResponse" class="response"></div>
    </div>

    <!-- 更新媒体文件 -->
    <div class="api-example">
      <h3>更新媒体文件</h3>
      <div class="form-group">
        <label for="updateMediaId">媒体文件ID：</label>
        <input type="text" id="updateMediaId" placeholder="输入要更新的媒体文件ID">
      </div>
      <div class="form-group">
        <label for="updateMediaUrl">新URL：</label>
        <input type="text" id="updateMediaUrl" placeholder="输入新的媒体文件URL">
      </div>
      <button onclick="updateMedia()">更新媒体文件</button>
      <div id="updateMediaResponse" class="response"></div>
    </div>

    <!-- 删除媒体文件 -->
    <div class="api-example">
      <h3>删除媒体文件</h3>
      <div class="form-group">
        <label for="deleteMediaId">媒体文件ID：</label>
        <input type="text" id="deleteMediaId" placeholder="输入要删除的媒体文件ID">
      </div>
      <button onclick="deleteMedia()">删除媒体文件</button>
      <div id="deleteMediaResponse" class="response"></div>
    </div>

    <!-- 根据类型获取媒体文件 -->
    <div class="api-example">
      <h3>根据类型获取媒体文件</h3>
      <div class="form-group">
        <label for="mediaTypeFilter">媒体类型：</label>
        <select id="mediaTypeFilter" title="选择媒体类型">
          <option value="image">图片</option>
          <option value="video">视频</option>
          <option value="video_cover">视频封面</option>
        </select>
      </div>
      <button onclick="getMediaByType()">获取媒体文件</button>
      <div id="mediaByTypeResponse" class="response"></div>
    </div>
  </div>

  <!-- 评论相关API -->
  <div class="api-section">
    <h2 class="api-title">评论相关API</h2>

    <!-- 获取所有评论 -->
    <div class="api-example">
      <h3>获取所有评论</h3>
      <button onclick="getAllComments()">获取所有评论</button>
      <div id="allCommentsResponse" class="response"></div>
    </div>

    <!-- 获取单个评论 -->
    <div class="api-example">
      <h3>获取单个评论</h3>
      <div class="form-group">
        <label for="commentId">评论ID：</label>
        <input type="text" id="commentId" placeholder="输入评论ID">
      </div>
      <button onclick="getComment()">获取评论</button>
      <div id="singleCommentResponse" class="response"></div>
    </div>

    <!-- 创建评论 -->
    <div class="api-example">
      <h3>创建评论</h3>
      <div class="form-group">
        <label for="commentNoteId">笔记ID：</label>
        <input type="text" id="commentNoteId" placeholder="输入笔记ID">
      </div>
      <div class="form-group">
        <label for="commentUserId">用户ID：</label>
        <input type="text" id="commentUserId" placeholder="输入用户ID">
      </div>
      <div class="form-group">
        <label for="commentContent">评论内容：</label>
        <textarea id="commentContent" placeholder="输入评论内容"></textarea>
      </div>
      <button type="button" id="createCommentBtn">创建评论</button>
      <div id="createCommentResponse" class="response"></div>
    </div>

    <!-- 更新评论 -->
    <div class="api-example">
      <h3>更新评论</h3>
      <div class="form-group">
        <label for="updateCommentId">评论ID：</label>
        <input type="text" id="updateCommentId" placeholder="输入要更新的评论ID">
      </div>
      <div class="form-group">
        <label for="updateCommentContent">新内容：</label>
        <textarea id="updateCommentContent" placeholder="输入新的评论内容"></textarea>
      </div>
      <button onclick="updateComment()">更新评论</button>
      <div id="updateCommentResponse" class="response"></div>
    </div>

    <!-- 删除评论 -->
    <div class="api-example">
      <h3>删除评论</h3>
      <div class="form-group">
        <label for="deleteCommentId">评论ID：</label>
        <input type="text" id="deleteCommentId" placeholder="输入要删除的评论ID">
      </div>
      <button onclick="deleteComment()">删除评论</button>
      <div id="deleteCommentResponse" class="response"></div>
    </div>

    <!-- 获取评论的回复 -->
    <div class="api-example">
      <h3>获取评论的回复</h3>
      <div class="form-group">
        <label for="commentRepliesId">评论ID：</label>
        <input type="text" id="commentRepliesId" placeholder="输入评论ID">
      </div>
      <button onclick="getCommentReplies()">获取评论回复</button>
      <div id="commentRepliesResponse" class="response"></div>
    </div>

    <!-- 创建评论回复 -->
    <div class="api-example">
      <h3>创建评论回复</h3>
      <div class="form-group">
        <label for="replyCommentId">评论ID：</label>
        <input type="text" id="replyCommentId" placeholder="输入评论ID">
      </div>
      <div class="form-group">
        <label for="replyUserId">用户ID：</label>
        <input type="text" id="replyUserId" placeholder="输入用户ID">
      </div>
      <div class="form-group">
        <label for="replyContent">回复内容：</label>
        <textarea id="replyContent" placeholder="输入回复内容"></textarea>
      </div>
      <button onclick="createCommentReply()">创建评论回复</button>
      <div id="createCommentReplyResponse" class="response"></div>
    </div>

    <!-- 删除评论回复 -->
    <div class="api-example">
      <h3>删除评论回复</h3>
      <div class="form-group">
        <label for="deleteReplyCommentId">评论ID：</label>
        <input type="text" id="deleteReplyCommentId" placeholder="输入评论ID">
      </div>
      <div class="form-group">
        <label for="deleteReplyId">回复ID：</label>
        <input type="text" id="deleteReplyId" placeholder="输入要删除的回复ID">
      </div>
      <button onclick="deleteCommentReply()">删除评论回复</button>
      <div id="deleteCommentReplyResponse" class="response"></div>
    </div>

    <!-- 点赞评论 -->
    <div class="api-example">
      <h3>点赞评论</h3>
      <div class="form-group">
        <label for="likeCommentId">评论ID：</label>
        <input type="text" id="likeCommentId" placeholder="输入评论ID">
      </div>
      <button onclick="likeComment()">点赞评论</button>
      <div id="likeCommentResponse" class="response"></div>
    </div>
  </div>

  <!-- 用户详情相关API -->
  <div class="api-section">
    <h2 class="api-title">用户详情相关API</h2>

    <!-- 获取用户详情 -->
    <div class="api-example">
      <h3>获取用户详情</h3>
      <div class="form-group">
        <label for="profileUserId">用户ID：</label>
        <input type="text" id="profileUserId" placeholder="输入用户ID">
      </div>
      <button onclick="getUserProfile()">获取用户详情</button>
      <div id="userProfileResponse" class="response"></div>
    </div>

    <!-- 创建用户详情 -->
    <div class="api-example">
      <h3>创建用户详情</h3>
      <div class="form-group">
        <label for="newProfileUserId">用户ID：</label>
        <input type="text" id="newProfileUserId" placeholder="输入用户ID">
      </div>
      <div class="form-group">
        <label for="userBio">用户简介：</label>
        <textarea id="userBio" placeholder="输入用户简介"></textarea>
      </div>
      <button onclick="createUserProfile()">创建用户详情</button>
      <div id="createUserProfileResponse" class="response"></div>
    </div>

    <!-- 更新用户简介 -->
    <div class="api-example">
      <h3>更新用户简介</h3>
      <div class="form-group">
        <label for="updateBioUserId">用户ID：</label>
        <input type="text" id="updateBioUserId" placeholder="输入用户ID">
      </div>
      <div class="form-group">
        <label for="updateUserBio">新简介：</label>
        <textarea id="updateUserBio" placeholder="输入新的用户简介"></textarea>
      </div>
      <button onclick="updateUserBio()">更新用户简介</button>
      <div id="updateUserBioResponse" class="response"></div>
    </div>

    <!-- 关注用户 -->
    <div class="api-example">
      <h3>关注用户</h3>
      <div class="form-group">
        <label for="followUserId">当前用户ID：</label>
        <input type="text" id="followUserId" placeholder="输入当前用户ID">
      </div>
      <div class="form-group">
        <label for="targetUserId">目标用户ID：</label>
        <input type="text" id="targetUserId" placeholder="输入要关注的用户ID">
      </div>
      <button onclick="followUser()">关注用户</button>
      <div id="followUserResponse" class="response"></div>
    </div>

    <!-- 取消关注 -->
    <div class="api-example">
      <h3>取消关注</h3>
      <div class="form-group">
        <label for="unfollowUserId">当前用户ID：</label>
        <input type="text" id="unfollowUserId" placeholder="输入当前用户ID">
      </div>
      <div class="form-group">
        <label for="unfollowTargetId">目标用户ID：</label>
        <input type="text" id="unfollowTargetId" placeholder="输入要取消关注的用户ID">
      </div>
      <button onclick="unfollowUser()">取消关注</button>
      <div id="unfollowUserResponse" class="response"></div>
    </div>

    <!-- 获取用户作品列表 -->
    <div class="api-example">
      <h3>获取用户作品列表</h3>
      <div class="form-group">
        <label for="userWorksId">用户ID：</label>
        <input type="text" id="userWorksId" placeholder="输入用户ID">
      </div>
      <button onclick="getUserWorks()">获取作品列表</button>
      <div id="userWorksResponse" class="response"></div>
    </div>

    <!-- 获取关注列表 -->
    <div class="api-example">
      <h3>获取关注列表</h3>
      <div class="form-group">
        <label for="followingUserId">用户ID：</label>
        <input type="text" id="followingUserId" placeholder="输入用户ID">
      </div>
      <button onclick="getFollowingList()">获取关注列表</button>
      <div id="followingListResponse" class="response"></div>
    </div>

    <!-- 获取粉丝列表 -->
    <div class="api-example">
      <h3>获取粉丝列表</h3>
      <div class="form-group">
        <label for="followersUserId">用户ID：</label>
        <input type="text" id="followersUserId" placeholder="输入用户ID">
      </div>
      <button onclick="getFollowersList()">获取粉丝列表</button>
      <div id="followersListResponse" class="response"></div>
    </div>
  </div>

  <script>
    const BASE_URL = 'http://1.14.98.17:8765';

    // 通用请求函数
    async function makeRequest(url, method = 'GET', body = null) {
      try {
        const options = {
          method,
          headers: {
            'Content-Type': 'application/json'
          }
        };
        if (body) {
          options.body = JSON.stringify(body);
        }
        const response = await fetch(url, options);
        const data = await response.json();
        return data;
      } catch (error) {
        console.error('请求错误:', error);
        return { success: false, message: error.message };
      }
    }

    // 用户相关API函数
    async function getAllUsers() {
      const data = await makeRequest(`${BASE_URL}/api/users`);
      document.getElementById('allUsersResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function getUser() {
      const userId = document.getElementById('userId').value;
      const data = await makeRequest(`${BASE_URL}/api/users/${userId}`);
      document.getElementById('singleUserResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function createUser() {
      const nickname = document.getElementById('newUserNickname').value;
      const avatarUrl = document.getElementById('newUserAvatar').value;
      const data = await makeRequest(`${BASE_URL}/api/users`, 'POST', {
        user_id: crypto.randomUUID(),
        nickname,
        avatar_url: avatarUrl
      });
      document.getElementById('createUserResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function updateUser() {
      const userId = document.getElementById('updateUserId').value;
      const nickname = document.getElementById('updateUserNickname').value;
      const avatarUrl = document.getElementById('updateUserAvatar').value;
      const data = await makeRequest(`${BASE_URL}/api/users/${userId}`, 'PUT', {
        nickname,
        avatar_url: avatarUrl
      });
      document.getElementById('updateUserResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function deleteUser() {
      const userId = document.getElementById('deleteUserId').value;
      const data = await makeRequest(`${BASE_URL}/api/users/${userId}`, 'DELETE');
      document.getElementById('deleteUserResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function getUserNotes() {
      const userId = document.getElementById('userNotesId').value;
      const data = await makeRequest(`${BASE_URL}/api/users/${userId}/notes`);
      document.getElementById('userNotesResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function getUserComments() {
      const userId = document.getElementById('userCommentsId').value;
      const data = await makeRequest(`${BASE_URL}/api/users/${userId}/comments`);
      document.getElementById('userCommentsResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    // 笔记相关API函数
    async function getAllNotes() {
      const data = await makeRequest(`${BASE_URL}/api/notes`);
      document.getElementById('allNotesResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function getNote() {
      const noteId = document.getElementById('noteId').value;
      const data = await makeRequest(`${BASE_URL}/api/notes/${noteId}`);
      document.getElementById('singleNoteResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function createNote() {
      const userId = document.getElementById('noteUserId').value;
      const title = document.getElementById('noteTitle').value;
      const description = document.getElementById('noteDescription').value;
      const timeLocation = document.getElementById('noteTimeLocation').value;
      const data = await makeRequest(`${BASE_URL}/api/notes`, 'POST', {
        note_id: crypto.randomUUID(),
        user_id: userId,
        title,
        description,
        time_location: timeLocation
      });
      document.getElementById('createNoteResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function updateNote() {
      const noteId = document.getElementById('updateNoteId').value;
      const title = document.getElementById('updateNoteTitle').value;
      const description = document.getElementById('updateNoteDescription').value;
      const data = await makeRequest(`${BASE_URL}/api/notes/${noteId}`, 'PUT', {
        title,
        description
      });
      document.getElementById('updateNoteResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function deleteNote() {
      const noteId = document.getElementById('deleteNoteId').value;
      const data = await makeRequest(`${BASE_URL}/api/notes/${noteId}`, 'DELETE');
      document.getElementById('deleteNoteResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function getNoteMedia() {
      const noteId = document.getElementById('noteMediaId').value;
      const data = await makeRequest(`${BASE_URL}/api/notes/${noteId}/media`);
      document.getElementById('noteMediaResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function getNoteComments() {
      const noteId = document.getElementById('noteCommentsId').value;
      const data = await makeRequest(`${BASE_URL}/api/notes/${noteId}/comments`);
      document.getElementById('noteCommentsResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function likeNote() {
      const noteId = document.getElementById('likeNoteId').value;
      const data = await makeRequest(`${BASE_URL}/api/notes/${noteId}/like`, 'POST');
      document.getElementById('likeNoteResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function favoriteNote() {
      const noteId = document.getElementById('favoriteNoteId').value;
      const data = await makeRequest(`${BASE_URL}/api/notes/${noteId}/favorite`, 'POST');
      document.getElementById('favoriteNoteResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    // 媒体文件相关API函数
    async function getAllMedia() {
      const data = await makeRequest(`${BASE_URL}/api/media`);
      document.getElementById('allMediaResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function getMedia() {
      const mediaId = document.getElementById('mediaId').value;
      const data = await makeRequest(`${BASE_URL}/api/media/${mediaId}`);
      document.getElementById('singleMediaResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function uploadMedia() {
      const noteId = document.getElementById('mediaNoteId').value;
      const file = document.getElementById('mediaFile').files[0];
      const mediaType = document.getElementById('mediaType').value;
      const mediaId = crypto.randomUUID();

      const formData = new FormData();
      formData.append('media_id', mediaId);
      formData.append('note_id', noteId);
      formData.append('media_type', mediaType);
      formData.append('file', file);

      try {
        const response = await fetch(`${BASE_URL}/api/media`, {
          method: 'POST',
          body: formData
        });
        const data = await response.json();
        document.getElementById('uploadMediaResponse').innerHTML =
          `<pre>${JSON.stringify(data, null, 2)}</pre>`;
      } catch (error) {
        console.error('上传错误:', error);
        document.getElementById('uploadMediaResponse').innerHTML =
          `<pre>${JSON.stringify({ success: false, message: error.message }, null, 2)}</pre>`;
      }
    }

    async function updateMedia() {
      const mediaId = document.getElementById('updateMediaId').value;
      const mediaUrl = document.getElementById('updateMediaUrl').value;
      const data = await makeRequest(`${BASE_URL}/api/media/${mediaId}`, 'PUT', {
        media_url: mediaUrl
      });
      document.getElementById('updateMediaResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function deleteMedia() {
      const mediaId = document.getElementById('deleteMediaId').value;
      const data = await makeRequest(`${BASE_URL}/api/media/${mediaId}`, 'DELETE');
      document.getElementById('deleteMediaResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function getMediaByType() {
      const mediaType = document.getElementById('mediaTypeFilter').value;
      const data = await makeRequest(`${BASE_URL}/api/media/type/${mediaType}`);
      document.getElementById('mediaByTypeResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    // 评论相关API函数
    async function getAllComments() {
      const data = await makeRequest(`${BASE_URL}/api/comments`);
      document.getElementById('allCommentsResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function getComment() {
      const commentId = document.getElementById('commentId').value;
      const data = await makeRequest(`${BASE_URL}/api/comments/${commentId}`);
      document.getElementById('singleCommentResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    // 添加事件监听器
    document.addEventListener('DOMContentLoaded', function () {
      document.getElementById('createCommentBtn').addEventListener('click', createComment);
    });

    async function createComment() {
      const noteId = document.getElementById('commentNoteId').value;
      const userId = document.getElementById('commentUserId').value;
      const content = document.getElementById('commentContent').value;
      const data = await makeRequest(`${BASE_URL}/api/comments`, 'POST', {
        comment_id: crypto.randomUUID(),
        note_id: noteId,
        user_id: userId,
        content,
        time: new Date().toISOString().split('T')[0]
      });
      document.getElementById('createCommentResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function updateComment() {
      const commentId = document.getElementById('updateCommentId').value;
      const content = document.getElementById('updateCommentContent').value;
      const data = await makeRequest(`${BASE_URL}/api/comments/${commentId}`, 'PUT', {
        content
      });
      document.getElementById('updateCommentResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function deleteComment() {
      const commentId = document.getElementById('deleteCommentId').value;
      const data = await makeRequest(`${BASE_URL}/api/comments/${commentId}`, 'DELETE');
      document.getElementById('deleteCommentResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function getCommentReplies() {
      const commentId = document.getElementById('commentRepliesId').value;
      const data = await makeRequest(`${BASE_URL}/api/comments/${commentId}/replies`);
      document.getElementById('commentRepliesResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function createCommentReply() {
      const commentId = document.getElementById('replyCommentId').value;
      const userId = document.getElementById('replyUserId').value;
      const content = document.getElementById('replyContent').value;
      const data = await makeRequest(`${BASE_URL}/api/comments/${commentId}/replies`, 'POST', {
        reply_id: crypto.randomUUID(),
        user_id: userId,
        content,
        time: new Date().toISOString().split('T')[0]
      });
      document.getElementById('createCommentReplyResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    // 删除评论回复
    async function deleteCommentReply() {
      const commentId = document.getElementById('deleteReplyCommentId').value;
      const replyId = document.getElementById('deleteReplyId').value;
      const data = await makeRequest(
        `${BASE_URL}/api/comments/${commentId}/replies/${replyId}`,
        'DELETE'
      );
      document.getElementById('deleteCommentReplyResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function likeComment() {
      const commentId = document.getElementById('likeCommentId').value;
      const data = await makeRequest(`${BASE_URL}/api/comments/${commentId}/like`, 'POST');
      document.getElementById('likeCommentResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    // 用户详情相关API函数
    async function getUserProfile() {
      const userId = document.getElementById('profileUserId').value;
      const data = await makeRequest(`${BASE_URL}/api/profile/${userId}`);
      document.getElementById('userProfileResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function createUserProfile() {
      const userId = document.getElementById('newProfileUserId').value;
      const bio = document.getElementById('userBio').value;
      const data = await makeRequest(`${BASE_URL}/api/profile`, 'POST', {
        userId,
        bio
      });
      document.getElementById('createUserProfileResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function updateUserBio() {
      const userId = document.getElementById('updateBioUserId').value;
      const bio = document.getElementById('updateUserBio').value;
      const data = await makeRequest(`${BASE_URL}/api/profile/${userId}/bio`, 'PUT', {
        bio
      });
      document.getElementById('updateUserBioResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function followUser() {
      const userId = document.getElementById('followUserId').value;
      const targetUserId = document.getElementById('targetUserId').value;
      const data = await makeRequest(
        `${BASE_URL}/api/profile/${userId}/follow/${targetUserId}`,
        'POST'
      );
      document.getElementById('followUserResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function unfollowUser() {
      const userId = document.getElementById('unfollowUserId').value;
      const targetUserId = document.getElementById('unfollowTargetId').value;
      const data = await makeRequest(
        `${BASE_URL}/api/profile/${userId}/follow/${targetUserId}`,
        'DELETE'
      );
      document.getElementById('unfollowUserResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function getUserWorks() {
      const userId = document.getElementById('userWorksId').value;
      const data = await makeRequest(`${BASE_URL}/api/profile/${userId}/works`);
      document.getElementById('userWorksResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function getFollowingList() {
      const userId = document.getElementById('followingUserId').value;
      const data = await makeRequest(`${BASE_URL}/api/profile/${userId}/following`);
      document.getElementById('followingListResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }

    async function getFollowersList() {
      const userId = document.getElementById('followersUserId').value;
      const data = await makeRequest(`${BASE_URL}/api/profile/${userId}/followers`);
      document.getElementById('followersListResponse').innerHTML =
        `<pre>${JSON.stringify(data, null, 2)}</pre>`;
    }
  </script>
</body>

</html>